<template>
  <div class="marketing-report">
    <div class="page-header">
      <h2>营销报表</h2>
      <p>查看营销活动效果和推广数据</p>
    </div>
    
    <div class="report-content">
      <!-- 营销概览 -->
      <div class="marketing-overview">
        <div class="overview-card">
          <div class="card-icon">📢</div>
          <div class="card-content">
            <h3>活跃营销活动</h3>
            <p class="metric-value">{{ activeCampaigns }}</p>
            <span class="metric-label">个活动进行中</span>
          </div>
        </div>
        
        <div class="overview-card">
          <div class="card-icon">👁️</div>
          <div class="card-content">
            <h3>总曝光量</h3>
            <p class="metric-value">{{ formatNumber(totalImpressions) }}</p>
            <span class="metric-label">次展示</span>
          </div>
        </div>
        
        <div class="overview-card">
          <div class="card-icon">🎯</div>
          <div class="card-content">
            <h3>点击率</h3>
            <p class="metric-value">{{ clickRate }}%</p>
            <span class="metric-label">CTR</span>
          </div>
        </div>
        
        <div class="overview-card">
          <div class="card-icon">💎</div>
          <div class="card-content">
            <h3>转化成本</h3>
            <p class="metric-value">¥{{ conversionCost }}</p>
            <span class="metric-label">每次转化</span>
          </div>
        </div>
      </div>
      
      <!-- 营销渠道分析 -->
      <div class="channel-analysis">
        <div class="section-header">
          <h3>营销渠道分析</h3>
          <div class="time-filter">
            <button class="filter-btn" :class="{ active: selectedTimeRange === '7d' }" @click="selectedTimeRange = '7d'">7天</button>
            <button class="filter-btn" :class="{ active: selectedTimeRange === '30d' }" @click="selectedTimeRange = '30d'">30天</button>
            <button class="filter-btn" :class="{ active: selectedTimeRange === '90d' }" @click="selectedTimeRange = '90d'">90天</button>
          </div>
        </div>
        
        <div class="channels-grid">
          <div class="channel-card" v-for="channel in marketingChannels" :key="channel.name">
            <div class="channel-header">
              <div class="channel-icon" :style="{ background: channel.color }">{{ channel.icon }}</div>
              <div class="channel-info">
                <h4>{{ channel.name }}</h4>
                <p class="channel-type">{{ channel.type }}</p>
              </div>
            </div>
            
            <div class="channel-metrics">
              <div class="metric">
                <span class="metric-label">曝光量</span>
                <span class="metric-value">{{ formatNumber(channel.impressions) }}</span>
              </div>
              <div class="metric">
                <span class="metric-label">点击量</span>
                <span class="metric-value">{{ formatNumber(channel.clicks) }}</span>
              </div>
              <div class="metric">
                <span class="metric-label">转化数</span>
                <span class="metric-value">{{ channel.conversions }}</span>
              </div>
              <div class="metric">
                <span class="metric-label">花费</span>
                <span class="metric-value">¥{{ formatNumber(channel.cost) }}</span>
              </div>
            </div>
            
            <div class="channel-performance">
              <div class="performance-bar">
                <div class="bar-fill" :style="{ width: (channel.performance / 100 * 100) + '%', background: channel.color }"></div>
              </div>
              <span class="performance-text">效果评分: {{ channel.performance }}/100</span>
            </div>
          </div>
        </div>
      </div>
      
      <!-- 营销活动列表 -->
      <div class="campaigns-section">
        <div class="section-header">
          <h3>营销活动</h3>
          <button class="btn btn-primary">
            <i class="icon">➕</i>
            新建活动
          </button>
        </div>
        
        <div class="campaigns-table">
          <table>
            <thead>
              <tr>
                <th>活动名称</th>
                <th>类型</th>
                <th>状态</th>
                <th>开始时间</th>
                <th>结束时间</th>
                <th>预算</th>
                <th>已花费</th>
                <th>转化数</th>
                <th>ROI</th>
                <th>操作</th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="campaign in campaigns" :key="campaign.id">
                <td>
                  <div class="campaign-name">
                    <strong>{{ campaign.name }}</strong>
                    <span class="campaign-desc">{{ campaign.description }}</span>
                  </div>
                </td>
                <td>
                  <span class="campaign-type" :class="campaign.type.toLowerCase()">{{ campaign.type }}</span>
                </td>
                <td>
                  <span class="status-badge" :class="campaign.status.toLowerCase()">{{ getStatusText(campaign.status) }}</span>
                </td>
                <td>{{ campaign.startDate }}</td>
                <td>{{ campaign.endDate }}</td>
                <td class="amount">¥{{ formatNumber(campaign.budget) }}</td>
                <td class="amount">¥{{ formatNumber(campaign.spent) }}</td>
                <td>{{ campaign.conversions }}</td>
                <td class="roi" :class="{ positive: campaign.roi > 0, negative: campaign.roi < 0 }">
                  {{ campaign.roi > 0 ? '+' : '' }}{{ campaign.roi }}%
                </td>
                <td>
                  <div class="action-buttons">
                    <button class="btn-action edit" title="编辑">✏️</button>
                    <button class="btn-action view" title="查看详情">👁️</button>
                    <button class="btn-action pause" title="暂停/恢复">⏸️</button>
                  </div>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
      
      <!-- 关键词分析 -->
      <div class="keywords-section">
        <div class="section-header">
          <h3>关键词分析</h3>
          <div class="search-box">
            <input type="text" placeholder="搜索关键词..." v-model="keywordSearch">
            <button class="search-btn">🔍</button>
          </div>
        </div>
        
        <div class="keywords-grid">
          <div class="keyword-card" v-for="keyword in filteredKeywords" :key="keyword.word">
            <div class="keyword-header">
              <span class="keyword-text">{{ keyword.word }}</span>
              <span class="keyword-rank" :class="getRankClass(keyword.rank)">排名 #{{ keyword.rank }}</span>
            </div>
            <div class="keyword-metrics">
              <div class="metric-row">
                <span class="label">搜索量:</span>
                <span class="value">{{ formatNumber(keyword.searchVolume) }}</span>
              </div>
              <div class="metric-row">
                <span class="label">点击量:</span>
                <span class="value">{{ formatNumber(keyword.clicks) }}</span>
              </div>
              <div class="metric-row">
                <span class="label">转化率:</span>
                <span class="value">{{ keyword.conversionRate }}%</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'MarketingReport',
  data() {
    return {
      selectedTimeRange: '30d',
      keywordSearch: '',
      activeCampaigns: 8,
      totalImpressions: 2456789,
      clickRate: 3.2,
      conversionCost: 45,
      marketingChannels: [
        {
          name: '百度推广',
          type: '搜索引擎',
          icon: '🔍',
          color: '#4285f4',
          impressions: 856432,
          clicks: 23456,
          conversions: 1234,
          cost: 45600,
          performance: 85
        },
        {
          name: '微信广告',
          type: '社交媒体',
          icon: '💬',
          color: '#07c160',
          impressions: 654321,
          clicks: 18765,
          conversions: 987,
          cost: 32100,
          performance: 78
        },
        {
          name: '抖音推广',
          type: '短视频',
          icon: '🎵',
          color: '#fe2c55',
          impressions: 987654,
          clicks: 34567,
          conversions: 1567,
          cost: 56700,
          performance: 92
        },
        {
          name: '淘宝直通车',
          type: '电商平台',
          icon: '🛒',
          color: '#ff6900',
          impressions: 432198,
          clicks: 12345,
          conversions: 678,
          cost: 28900,
          performance: 73
        }
      ],
      campaigns: [
        {
          id: 1,
          name: '春季新品促销',
          description: '春季运动鞋新品上市推广',
          type: 'SEM',
          status: 'active',
          startDate: '2024-03-01',
          endDate: '2024-03-31',
          budget: 50000,
          spent: 32500,
          conversions: 245,
          roi: 156
        },
        {
          id: 2,
          name: '品牌曝光活动',
          description: '提升品牌知名度',
          type: 'Display',
          status: 'active',
          startDate: '2024-02-15',
          endDate: '2024-04-15',
          budget: 80000,
          spent: 45600,
          conversions: 189,
          roi: 89
        },
        {
          id: 3,
          name: '双十一预热',
          description: '双十一购物节预热推广',
          type: 'Social',
          status: 'paused',
          startDate: '2024-10-01',
          endDate: '2024-11-11',
          budget: 120000,
          spent: 0,
          conversions: 0,
          roi: 0
        },
        {
          id: 4,
          name: '会员专享活动',
          description: '老客户回购促销',
          type: 'Email',
          status: 'completed',
          startDate: '2024-01-01',
          endDate: '2024-01-31',
          budget: 15000,
          spent: 14800,
          conversions: 567,
          roi: 234
        }
      ],
      keywords: [
        { word: '运动鞋', rank: 3, searchVolume: 125000, clicks: 3456, conversionRate: 4.2 },
        { word: '篮球鞋', rank: 7, searchVolume: 89000, clicks: 2134, conversionRate: 3.8 },
        { word: 'Nike鞋', rank: 12, searchVolume: 156000, clicks: 4567, conversionRate: 5.1 },
        { word: '跑步鞋', rank: 5, searchVolume: 98000, clicks: 2890, conversionRate: 3.9 },
        { word: '休闲鞋', rank: 15, searchVolume: 67000, clicks: 1678, conversionRate: 2.8 },
        { word: 'Adidas鞋', rank: 9, searchVolume: 134000, clicks: 3789, conversionRate: 4.6 }
      ]
    };
  },
  computed: {
    filteredKeywords() {
      if (!this.keywordSearch) return this.keywords;
      return this.keywords.filter(keyword => 
        keyword.word.toLowerCase().includes(this.keywordSearch.toLowerCase())
      );
    }
  },
  methods: {
    formatNumber(num) {
      return num.toLocaleString('zh-CN');
    },
    getStatusText(status) {
      const statusMap = {
        active: '进行中',
        paused: '已暂停',
        completed: '已完成',
        draft: '草稿'
      };
      return statusMap[status] || status;
    },
    getRankClass(rank) {
      if (rank <= 3) return 'excellent';
      if (rank <= 10) return 'good';
      return 'normal';
    }
  }
};
</script>

<style scoped>
.marketing-report {
  padding: 0;
}

.page-header {
  margin-bottom: 30px;
}

.page-header h2 {
  margin: 0 0 8px 0;
  font-size: 24px;
  color: #2c3e50;
  font-weight: 600;
}

.page-header p {
  margin: 0;
  color: #6c757d;
  font-size: 14px;
}

.report-content > div {
  margin-bottom: 32px;
}

.marketing-overview {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
}

.overview-card {
  background: white;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  display: flex;
  align-items: center;
  gap: 16px;
  transition: all 0.3s ease;
}

.overview-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.card-icon {
  font-size: 28px;
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 12px;
  filter: drop-shadow(0 4px 8px rgba(102, 126, 234, 0.3));
}

.card-content h3 {
  margin: 0 0 8px 0;
  font-size: 14px;
  color: #6c757d;
  font-weight: 500;
}

.metric-value {
  margin: 0 0 4px 0;
  font-size: 24px;
  font-weight: 700;
  color: #2c3e50;
}

.metric-label {
  font-size: 12px;
  color: #6c757d;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.section-header h3 {
  margin: 0;
  font-size: 20px;
  color: #2c3e50;
  font-weight: 600;
}

.time-filter {
  display: flex;
  gap: 8px;
}

.filter-btn {
  padding: 8px 16px;
  border: 2px solid #e9ecef;
  background: white;
  border-radius: 6px;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.filter-btn.active,
.filter-btn:hover {
  background: #667eea;
  border-color: #667eea;
  color: white;
}

.channels-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
}

.channel-card {
  background: white;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}

.channel-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.channel-icon {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  color: white;
}

.channel-info h4 {
  margin: 0 0 4px 0;
  font-size: 16px;
  color: #2c3e50;
  font-weight: 600;
}

.channel-type {
  margin: 0;
  font-size: 12px;
  color: #6c757d;
}

.channel-metrics {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 16px;
}

.metric {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.metric .metric-label {
  font-size: 12px;
  color: #6c757d;
}

.metric .metric-value {
  font-size: 16px;
  font-weight: 600;
  color: #2c3e50;
}

.channel-performance {
  margin-top: 16px;
}

.performance-bar {
  width: 100%;
  height: 6px;
  background: #e9ecef;
  border-radius: 3px;
  
  margin-bottom: 8px;
}

.bar-fill {
  height: 100%;
  border-radius: 3px;
  transition: width 0.3s ease;
}

.performance-text {
  font-size: 12px;
  color: #6c757d;
}

.campaigns-section {
  background: white;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}

.btn {
  display: inline-flex;
  align-items: center;
  padding: 10px 20px;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
}

.btn-primary {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}

.btn .icon {
  margin-right: 8px;
  font-size: 16px;
}

.campaigns-table {
  overflow-x: auto;
}

.campaigns-table table {
  width: 100%;
  border-collapse: collapse;
}

.campaigns-table th,
.campaigns-table td {
  padding: 12px 16px;
  text-align: left;
  border-bottom: 1px solid #e9ecef;
}

.campaigns-table th {
  background: #f8f9fa;
  font-weight: 600;
  color: #495057;
  font-size: 14px;
}

.campaigns-table td {
  font-size: 14px;
  color: #495057;
}

.campaigns-table tbody tr:hover {
  background: #f8f9fa;
}

.campaign-name strong {
  display: block;
  margin-bottom: 2px;
}

.campaign-desc {
  font-size: 12px;
  color: #6c757d;
}

.campaign-type {
  padding: 4px 8px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 500;
}

.campaign-type.sem {
  background: #e3f2fd;
  color: #1976d2;
}

.campaign-type.display {
  background: #f3e5f5;
  color: #7b1fa2;
}

.campaign-type.social {
  background: #e8f5e8;
  color: #388e3c;
}

.campaign-type.email {
  background: #fff3e0;
  color: #f57c00;
}

.status-badge {
  padding: 4px 8px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 500;
}

.status-badge.active {
  background: #d4edda;
  color: #155724;
}

.status-badge.paused {
  background: #fff3cd;
  color: #856404;
}

.status-badge.completed {
  background: #d1ecf1;
  color: #0c5460;
}

.amount {
  font-weight: 600;
  color: #2c3e50;
}

.roi.positive {
  color: #28a745;
  font-weight: 600;
}

.roi.negative {
  color: #dc3545;
  font-weight: 600;
}

.action-buttons {
  display: flex;
  gap: 8px;
}

.btn-action {
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 6px;
  background: #f8f9fa;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  transition: all 0.3s ease;
}

.btn-action:hover {
  background: #e9ecef;
  transform: scale(1.1);
}

.keywords-section {
  background: white;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}

.search-box {
  display: flex;
  gap: 8px;
}

.search-box input {
  padding: 8px 12px;
  border: 2px solid #e9ecef;
  border-radius: 6px;
  font-size: 14px;
  width: 200px;
}

.search-btn {
  padding: 8px 12px;
  border: none;
  background: #667eea;
  color: white;
  border-radius: 6px;
  cursor: pointer;
}

.keywords-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
}

.keyword-card {
  border: 2px solid #e9ecef;
  border-radius: 8px;
  padding: 16px;
  transition: all 0.3s ease;
}

.keyword-card:hover {
  border-color: #667eea;
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.15);
}

.keyword-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.keyword-text {
  font-size: 16px;
  font-weight: 600;
  color: #2c3e50;
}

.keyword-rank {
  padding: 4px 8px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 500;
}

.keyword-rank.excellent {
  background: #d4edda;
  color: #155724;
}

.keyword-rank.good {
  background: #fff3cd;
  color: #856404;
}

.keyword-rank.normal {
  background: #f8d7da;
  color: #721c24;
}

.keyword-metrics {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.metric-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.metric-row .label {
  font-size: 14px;
  color: #6c757d;
}

.metric-row .value {
  font-size: 14px;
  font-weight: 600;
  color: #2c3e50;
}

@media (max-width: 768px) {
  .marketing-overview {
    grid-template-columns: 1fr;
  }
  
  .channels-grid {
    grid-template-columns: 1fr;
  }
  
  .keywords-grid {
    grid-template-columns: 1fr;
  }
  
  .section-header {
    flex-direction: column;
    gap: 16px;
    align-items: flex-start;
  }
}
</style>